<template>
    <div class="app-page">
        <notice-header
                v-if="!isApp"
                :tip="siteName"
                class="detail-open">
        </notice-header>
        <router-view/>
    </div>
</template>

<script setup>
import NoticeHeader from '@/components/notice-header.vue';
import {computed, watch, provide, ref, readonly} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {useStore} from 'vuex';
import locationTransfer from '@/global/location-transfer';
import Storage from '@/lib/storage';
import { Toast as VanToast } from 'vant';

// import { getDevicePage, deviceType, uaParser } from '@/router/device.js';

const router = useRouter();
const route = useRoute();
const store = useStore();

const Cookies = new Storage('cookie');

const showBar = ref(true);
const useNewTitle = ref(false); // 用设定的title么？

const brandInfo = computed(() => {
    return store.state.brand?.publishBrand;
})


const siteName = computed(() => {
    return brandInfo.value?.brandConfig?.siteName || '';
});

const envPlatform = computed(() => {
    return store.state.curUserAgent?.env;
});

const isApp = ref(true);

watch(() => store.state.curUserAgent?.isApp, (val) => {
    isApp.value = val;
})


const barTitle = ref('');

provide('barTitle', barTitle);
provide('showBar', showBar);
provide('envPlatform', readonly(envPlatform));

// computed区
const isFullPage = computed(() => {
    return !!(route.meta || {}).fullScreen || route.path === '/';
});
const isInit = computed(() => {
    // if(route.name === 'login' || store.state.user.initialized) {
    //     return true
    // }
    // return false
    return true
});

// 父组件class
const mainClass = computed(() => {
    return 'contain-wrap'
});


watch(
    () => route.name,
    async (val) => {
        await store.dispatch('setUserAgent');
        const token = Cookies.getItem('X-DT-accessToken');
        console.warn('--------token', token);

        // 判断是否请求用户信息
        if (!store.state.user?.initUserInfo) {
            try {
                await store.dispatch('user/getCurrentUser');
            } catch (err) {
                console.log(err);
            }
        }
        barTitle.value = route.meta.title;

        if (route.name != 'myMooc') {
            store.dispatch('jsBridge/SXYJSBridge', {
                fun: 'pageConfig',
                data: {
                    home: `${window.location.origin}/appmooc/userCenter/mooc`
                }
            })
        }
});

// 全局消息提示
G_listenEvent('toast', (newMsg) => {
    if(newMsg.type === 'success') {
        VanToast.success(newMsg.message);
    }else if(newMsg.type === 'error') {
        VanToast.fail(newMsg.message);
    }else{
        VanToast(newMsg.message);
    }
});

// toErrorPage
G_listenEvent('toErrorPage', (newMsg) => {
    console.log(newMsg, '===========G_listenEvent===========');
    store.commit('meta', {
        pageMessage: newMsg
    });
    // store.dispatch('jsBridge/disposeBridge', {
    //     method: 'goNewPage',
    //     url: {
    //         name: 'errorPage'
    //     },
    //     isReplace: true,
    //     naviBarHidden: false
    // })
});


const onClickLeft = () => {
    // router.go(-1);
    store.dispatch('jsBridge/disposeBridge', {
        isBack: true,
        data: {
            refresh: true
        }
    });
}
// 相当于created
locationTransfer.registerRouter();
</script>

<style lang="scss">
@import '~@/assets/styles/preset.css';
@import '~@/assets/iconfont/iconfont.css';
@import '~@/assets/fonts/dinalternate.css';

#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #2c3e50;
    min-height: 100%;
    background: #F5F5F5;
}
#nav {
    padding: 30px;

    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}

.app-header {
    &.is-transparent {
        background: transparent !important;
    }
}
.app-page {
    font-size: 15px;
    min-height: 100vh;
}

@supports (bottom: env(safe-area-inset-bottom)) {
    #app {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff;
    }
    .btn-block {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff;
    }
    .comment-wrapper-margin-bottom {
        margin-bottom: calc(48px + constant(safe-area-inset-bottom)) !important;
        margin-bottom: calc(48px + env(safe-area-inset-bottom)) !important;
    }
    .comment-bottom {
        bottom: calc(48px + constant(safe-area-inset-bottom)) !important;
        bottom: calc(48px + env(safe-area-inset-bottom)) !important;
    }
    .catalogue-wrapper-margin-bottom {
        margin-bottom: constant(safe-area-inset-bottom) !important;
        margin-bottom: env(safe-area-inset-bottom) !important;
    }
    .catalogue-bottom {
        bottom: constant(safe-area-inset-bottom) !important;
        bottom: env(safe-area-inset-bottom) !important;
    }
}
</style>
